<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <style>

        .main {
            width: 500px;
            height: 600px;
            border: 1px solid #ccc;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
           
        }
        h1{
            text-align: center;
        }
        table{
            border-spacing: 0 15px;
            margin-left: 30px;
        }
        .btn{
            margin: 0 auto;
            text-align: center;
            margin-top: 30px;  
        }
        nav{
            margin-left: -80px;
            margin-top: 2px;
            position: relative;
        }
        .error_img{
            position: absolute;
            top: 3px
        }
        .error_msgstyle{
            font-size: 12px;
            color: red;
            text-align: left;
            float: left;
            

        }
        .error_msg{
        
            width: 180px;
            height: 20px;
            margin-left: 20px;
        }
        .error_imgstyle{
            width: 15px;
            height: 15px;   
            float: left; 
            background: url(../img/small_icons.jpg) no-repeat ; 
            background-position: -109px -11px;
            background-size: 400px
        }
        .right_msgstyle{
            font-size: 12px;
            color: green;
            text-align: left;
            float: left;
            margin-left: 20px;
        }
        .right_imgstyle{
            width: 15px;
            height: 15px;
            float: left; 
            background: url(../img/small_icons.jpg) no-repeat ; 
            background-position: -247px -288px;
            background-size: 400px; 
        }
    </style>
    <script>

        function remove(selectImg, selectMsg) {
            selectMsg.innerHTML = "";
            selectMsg.classList.remove("error_imgstyle");
            selectImg.classList.remove("error_imgstyle");
            selectMsg.classList.remove("right_msgstyle");
            selectImg.classList.remove("right_imgstyle");
        }

        function add(selectImg, selectMsg, value, regExp, errorMsg, rightMsg) {
            if (!regExp.test(value)) {
                selectMsg.innerHTML = errorMsg;
                selectMsg.classList.add("error_msgstyle");
                selectImg.classList.add("error_imgstyle");
            } else {
                selectMsg.innerHTML = rightMsg;
                selectMsg.classList.add("right_msgstyle");
                selectImg.classList.add("right_imgstyle");
            }

        }
        function init() {
            //用户名
            document.getElementById("name").addEventListener("click", () => {
                let selectImg = document.getElementById("error_img1");
                let selectMsg = document.getElementById("error_msg1");
                remove(selectImg, selectMsg);
            }, false);
            document.getElementById("name").addEventListener("blur", () => {
                let selectImg = document.getElementById("error_img1");
                let selectMsg = document.getElementById("error_msg1");
                let regExp = /^[a-zA-Z0-9_-]{4,16}$/;
                let value = document.getElementById("name").value;
                let errorMsg = "用户名必须是4到16位（字母，数字，下划线，减号）且不能为空！"
                let rightMsg = "格式正确!";
                remove(selectImg, selectMsg);
                add(selectImg, selectMsg, value, regExp, errorMsg, rightMsg);
            }, false);
            //昵称
            document.getElementById("nicheng").addEventListener("click", () => {
                let selectImg = document.getElementById("error_img2");
                let selectMsg = document.getElementById("error_msg2");
                remove(selectImg, selectMsg);
            }, false);
            document.getElementById("nicheng").addEventListener("blur", () => {
                let selectImg = document.getElementById("error_img2");
                let selectMsg = document.getElementById("error_msg2");
                let regExp = /^[\s|\S]{1,10}$/;
                let value = document.getElementById("nicheng").value;
                let errorMsg = "昵称不能为空，不能超过10个字符！"
                let rightMsg = "格式正确!";
                remove(selectImg, selectMsg);
                add(selectImg, selectMsg, value, regExp, errorMsg, rightMsg);
            }, false);
            //密码
            document.getElementById("password").addEventListener("click", () => {
                let selectImg = document.getElementById("error_img3");
                let selectMsg = document.getElementById("error_msg3");
                remove(selectImg, selectMsg);
            }, false);
            document.getElementById("password").addEventListener("blur", () => {
                let selectImg = document.getElementById("error_img3");
                let selectMsg = document.getElementById("error_msg3");
                let regExp = /^.{8,20}$/;
                let value = document.getElementById("password").value;
                let errorMsg = "不能为空；长度不能小于8，不能大于20个字符！"
                let rightMsg = "格式正确!";
                remove(selectImg, selectMsg);
                add(selectImg, selectMsg, value, regExp, errorMsg, rightMsg);
            }, false);
            //重复密码
            document.getElementById("repass").addEventListener("click", () => {
                let selectImg = document.getElementById("error_img4");
                let selectMsg = document.getElementById("error_msg4");
                remove(selectImg, selectMsg);
            }, false);
            document.getElementById("repass").addEventListener("blur", () => {
                let selectImg = document.getElementById("error_img4");
                let selectMsg = document.getElementById("error_msg4");
                let password = document.getElementById("password").value;
                let repass =  document.getElementById("repass").value;
                let value = document.getElementById("repass").value;
                let errorMsg = "密码不一致！"
                let rightMsg = "格式正确!";
                if(password!=repass)
                {
                selectMsg.innerHTML = errorMsg;
                selectMsg.classList.add("error_msgstyle");
                selectImg.classList.add("error_imgstyle");
                }else{
                    selectMsg.innerHTML = rightMsg;
                selectMsg.classList.add("right_msgstyle");
                selectImg.classList.add("right_imgstyle");  
                }
            }, false);
            //邮箱
            document.getElementById("email").addEventListener("click", () => {
                let selectImg = document.getElementById("error_img");
                let selectMsg = document.getElementById("error_msg");
                remove(selectImg, selectMsg);
            }, false);
            document.getElementById("email").addEventListener("blur", (event) => {
                let selectImg = document.getElementById("error_img");
                let selectMsg = document.getElementById("error_msg");
                let regExp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
                let value = document.getElementById("email").value;
                let errorMsg = "邮箱格式不正确！";
                let rigthMsg = "输入正确！";
                remove(selectImg, selectMsg);
                add(selectImg, selectMsg, value, regExp, errorMsg, rigthMsg);
            }, false);
            //手机号
            document.getElementById("tel").addEventListener("click", () => {
                let selectImg = document.getElementById("error_img5");
                let selectMsg = document.getElementById("error_msg5");
                remove(selectImg, selectMsg);
            }, false);
            document.getElementById("tel").addEventListener("blur", (event) => {
                let selectImg = document.getElementById("error_img5");
                let selectMsg = document.getElementById("error_msg5");
                let regExp = /^1[34578]\d{9}$/;
                let value = document.getElementById("tel").value;
                let errorMsg = "手机号格式不正确！";
                let rigthMsg = "输入正确！";
                remove(selectImg, selectMsg);
                add(selectImg, selectMsg, value, regExp, errorMsg, rigthMsg);
            }, false);
        }
        window.addEventListener("load", init, false);

    </script>
</head>

<body>
    <section class="main">
        <h1>用户注册</h1>
        <table>
            <tbody id="myTbody">
                <tr>
                    <td><label for="name">用户名：</label></td>
                    <td><input type="text" name="name" id="name"></td>
                    <td>
                        <nav>
                            <div class="error_img" id="error_img1" index="1"></div>
                            <div class="error_msg" id="error_msg1" index="1"></div>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td><label for="nicheng">昵称:</label></td>
                    <td style="width:100px"><input type="text" name="nicheg" id="nicheng"></td>
                    <td>
                        <nav>
                            <div class="error_img" id="error_img2"></div>
                            <div class="error_msg" id="error_msg2"></div>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td><label for="password">密码：</label></td>
                    <td><input type="password" name="password" id="password"></td>
                    <td>
                        <nav>
                            <div class="error_img" id="error_img3"></div>
                            <div class="error_msg" id="error_msg3"></div>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td><label for="repass">重复密码：</label></td>
                    <td><input type="password" name="repass" id="repass"></td>
                    <td>
                        <nav>
                            <div class="error_img" id="error_img4"></div>
                            <div class="error_msg" id="error_msg4"></div>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td><label for="email">emial:</label></td>
                    <td><input type="email" name="email" id="email"></td>
                    <td>
                        <nav>
                            <div class="error_img" id="error_img"></div>
                            <div class="error_msg" id="error_msg"></div>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td><label for="tel">手机号：</label></td>
                    <td><input type="tel" name="tel" id="tel"></td>
                    <td>
                        <nav>
                            <div class="error_img" id="error_img5"></div>
                            <div class="error_msg" id="error_msg5"></div>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="radio" name="sex" id="sex1" value="1"><label for="sex1">男</label>
                        <input type="radio" name="sex" id="sex2" value="2"><label for="sex2">女</label></td>

                </tr>
                <tr>
                    <td>爱好：</td>
                    <td><input type="checkbox" name="aihao" id="sing" value="sing"><label for="sing">唱歌</label>
                        <input type="checkbox" name="aihao" id="reading" value="reading"><label for="reading">读书</label>
                        <input type="checkbox" name="aihao" id="sport" value="sport"><label for="sport">运动</label>
                        <input type="checkbox" name="aihao" id="manong" value="manong"><label for="manong">写代码</label>
                    </td>
                </tr>
                <tr>
                    <td><label for="province">籍贯:</label></td>
                    <td><select name="province" id="province">

                        </select>
                        <select name="city" id="city">
                        </select>
                    </td>

                </tr>
                <tr>
                    <td><label for="photo">照片:</label></td>
                    <td><input type="file" name="photo" id="photo"></td>
                </tr>
                <tr>
                    <td><label for="birth">生日：</label></td>
                    <td><input type="date" name="birth" id="birth"></td>
                </tr>
                <tr>

                    <td colspan="3">
                        <nav class="btn">
                            <input type="reset">
                            <input type="submit" value="注册">
                        </nav>
                    </td>

                </tr>
            </tbody>
        </table>
    </section>
</body>

</html>